<template>
  <view class="ranking">
    <header-vue
      :back="true"
      :title="title"
      bgColor="transparent"
      :color="'#fff'"
      :titleColor="'#fff'"
    ></header-vue>

    <!-- 背景渐变 -->
    <view class="background-gradient">
      <image  :src="IMAGE_URL+'/static/user/ph-bg.png'" class="bg-image" mode="widthFix" />
    </view>

    <!-- 顶部选项卡 -->
    <view class="tab-container">
      <!-- <view
        class="tab-item"
        v-for="(item, index) in typeList"
        :key="index"
        :class="{ active: typeIndex == index }"
        @click="typeIndex = index"
      >
        <text class="tab-text">{{ item.name }}</text>
        <view class="tab-line" v-if="typeIndex == index"></view>
        <view class="tab-line2" v-else></view>
      </view> -->
      <rankTabs />
    </view>
    <!-- 接单榜内容 -->
    <view class="content">
      <!-- 顶部前三名 -->
      <view class="top-three-box">
        <view class="top-three">
          <!-- 第二名 -->
          <view class="top-item rank-2">
            <view style="width: 152rpx; height: 280rpx" />
            <view class="rank-box">
              <view class="avatar-container">
                <u-image
                  :src="IMAGE_URL+'/static/master/cat1.png'"
                  width="128rpx"
                  height="128rpx"
                  shape="circle"
                  mode="aspectFill"
                ></u-image>
              </view>
              <view class="user-info">
                <text class="username">魔仙女王</text>
                <text class="count">￥9673.00</text>
              </view>
            </view>
          </view>

          <!-- 第一名 -->
          <view class="top-item rank-1">
            <view style="width: 152rpx; height: 280rpx" />
            <view class="rank-box">
              <view class="avatar-container">
                <u-image
                  :src="IMAGE_URL+'/static/master/cat1.png'"
                  width="128rpx"
                  height="128rpx"
                  shape="circle"
                  mode="aspectFill"
                ></u-image>
              </view>
              <view class="user-info">
                <text class="username">悲伤逆流成河</text>
                <text class="count">￥9851.00</text>
              </view>
            </view>
          </view>

          <!-- 第三名 -->
          <view class="top-item rank-3">
            <view style="width: 152rpx; height: 280rpx" />
            <view class="rank-box">
              <view class="avatar-container">
                <u-image
                  :src="IMAGE_URL+'/static/master/cat1.png'"
                  width="128rpx"
                  height="128rpx"
                  shape="circle"
                  mode="aspectFill"
                ></u-image>
              </view>
              <view class="user-info">
                <text class="username">乌鸦王子</text>
                <text class="count">￥9216.00</text>
              </view>
            </view>
          </view>
        </view>
        <view class="top-three-img">
          <image
            style="width: 100%; height: 159rpx"
             :src="IMAGE_URL+'/static/user/ph-num.png'"
            mode="aspectFill"
          />
          <view class="top-three-img-num">
            <view class="top-three-img-num-item t1">2</view>
            <view class="top-three-img-num-item t2">1</view>
            <view class="top-three-img-num-item t1">3</view>
          </view>
        </view>
      </view>

      <!-- 排行榜列表 -->
      <view class="ranking-list">
        <view
          class="ranking-item"
          v-for="(item, index) in rankingList"
          :key="index"
        >
          <view class="item-rank">
            <text class="rank-text">{{ item.rank }}</text>
          </view>
          <view class="item-info">
            <u-image
              :src="item.avatar"
              width="72rpx"
              height="72rpx"
              shape="circle"
              class="item-avatar"
              mode="aspectFill"
            ></u-image>
            <text class="item-name">{{ item.name }}</text>
          </view>
          <view class="item-count">{{ item.count }}单</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";
import rankTabs from "./rank-tabs.vue";
import appConfig from "@/config/app.js";
//  IMAGE_URL: appConfig.IMAGE_URL,
export default {
  props: {
    title: {
      type: String,
      default: "排行榜",
    },
  },
  data() {
    return {
       IMAGE_URL: appConfig.IMAGE_URL,
      typeList: [
        {
          name: "接单榜",
        },
        {
          name: "好评榜",
        },
      ],
      typeIndex: 0,
      rankingList: [
        {
          rank: "04",
          name: "露营爱吃火锅",
          count: "36",
          avatar: "/static/images/avatar4.png",
        },
        {
          rank: "05",
          name: "老马爱吃草莓蛋糕",
          count: "34",
          avatar: "/static/images/avatar5.png",
        },
        {
          rank: "06",
          name: "萝卜青菜的爱情",
          count: "32",
          avatar: "/static/images/avatar6.png",
        },
        {
          rank: "07",
          name: "乌拉拉啦啦啦啦",
          count: "30",
          avatar: "/static/images/avatar7.png",
        },
        {
          rank: "08",
          name: "二哈大战客厅沙发",
          count: "28",
          avatar: "/static/images/avatar8.png",
        },
        {
          rank: "09",
          name: "葫芦娃救爷爷",
          count: "24",
          avatar: "/static/images/avatar9.png",
        },
        {
          rank: "10",
          name: "最炫酷的民族风",
          count: "20",
          avatar: "/static/images/avatar10.png",
        },
      ],
      ratingList: [
        {
          rank: "04",
          name: "露营爱吃火锅",
          rating: "4.9",
          avatar: "/static/images/avatar4.png",
        },
        {
          rank: "05",
          name: "老马爱吃草莓蛋糕",
          rating: "4.8",
          avatar: "/static/images/avatar5.png",
        },
        {
          rank: "06",
          name: "萝卜青菜的爱情",
          rating: "4.7",
          avatar: "/static/images/avatar6.png",
        },
        {
          rank: "07",
          name: "乌拉拉啦啦啦啦",
          rating: "4.6",
          avatar: "/static/images/avatar7.png",
        },
        {
          rank: "08",
          name: "二哈大战客厅沙发",
          rating: "4.5",
          avatar: "/static/images/avatar8.png",
        },
        {
          rank: "09",
          name: "葫芦娃救爷爷",
          rating: "4.4",
          avatar: "/static/images/avatar9.png",
        },
        {
          rank: "10",
          name: "最炫酷的民族风",
          rating: "4.3",
          avatar: "/static/images/avatar10.png",
        },
      ],
    };
  },
  components: {
    headerVue,
    rankTabs,
  },
};
</script>

<style lang="scss" scoped>
.ranking {
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
}
.background-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400rpx;
  z-index: 0;

  .bg-image {
    width: 100%;
    height: 100%;
  }
}
.tab-container {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 16rpx 32rpx 12rpx 32rpx;
}

.tab-item {
  position: relative;
  margin-right: 48rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-text {
  font-size: 30rpx;
  color: #ffffff;
}

.tab-item.active .tab-text {
  color: #f8f8f8;
  font-size: 30rpx;
}

.tab-line {
  margin-top: 8rpx;
  width: 28rpx;
  height: 6rpx;
  background: #0785cf;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.tab-line2 {
  margin-top: 8rpx;

  width: 28rpx;
  height: 6rpx;
  background: transparent;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.top-three-box {
  display: flex;
  flex-direction: column;
  height: 438rpx;

  position: relative;
}

/* 顶部前三名样式 */
.top-three {
  display: flex;
  padding: 0 46rpx;
  justify-content: space-between;
}

.top-three-img {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  .top-three-img-num {
    width: 100%;
    box-sizing: border-box;
    height: 159rpx;
    position: absolute;
    top: 0rpx;
    left: 0rpx;

    display: flex;
    justify-content: space-between;
    align-items: center;
    .t1 {
      position: relative;
      top: 40rpx;
    }
    .t2 {
      position: relative;
      top: 20rpx;
    }
    .top-three-img-num-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48rpx;
      color: #f6f6f6;
      font-weight: 600;
    }
  }
}

.top-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.rank-1 {
  order: 2;

  position: relative;
}
.rank-box {
  position: absolute;
  top: 0rpx;
  width: 100%;
  height: 100%;
  left: 0rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20rpx;
}

.rank-2 {
  order: 1;
  position: relative;
  top: 50rpx;
}

.rank-3 {
  order: 3;
  position: relative;
  top: 50rpx;
}

.rank-number {
  width: 50rpx;
  height: 50rpx;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.avatar-container {
  width: 128rpx;
  height: 128rpx;

  margin-bottom: 20rpx;
}

.avatar {
  width: 100%;
  height: 100%;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.username {
  margin-bottom: 8rpx;

  font-size: 20rpx;
  color: #333333;
}

.count {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

/* 排行榜列表样式 */
.ranking-list {
  flex: 1;
  background: #ffffff;
  z-index: 1;

  padding: 10rpx 32rpx;
  border-radius: 28rpx 28rpx 0rpx 0rpx;
}

.list-header {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #f0f0f0;
  margin-bottom: 10rpx;
}

.header-item {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
}

.rank-header {
  width: 100rpx;
  text-align: center;
}

.name-header {
  flex: 1;
  text-align: left;
  padding-left: 30rpx;
}

.count-header {
  width: 120rpx;
  text-align: center;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
}

.ranking-item:last-child {
  border-bottom: none;
}

.item-rank {
  width: 100rpx;
  font-size: 40rpx;
  font-weight: 600;
  color: #aaaaaa;
  text-align: start;
}

.rank-text {
  font-size: 40rpx;
  font-weight: 600;
  color: #aaaaaa;
  text-align: start;
}

.item-info {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 10rpx;
}

.item-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: #f0f0f0;
  margin-right: 20rpx;
}

.item-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.item-count {
  width: 120rpx;
  text-align: right;
  font-size: 32rpx;
  color: #333333;
}
</style>
